<template>
    <div class="message-send-container">
      <div class="header">
        <h2>发送消息</h2>
        <AccountSelector />
      </div>
      
      <el-form :model="form" label-width="100px">
        <el-form-item label="接收人">
          <el-select 
            v-model="form.userIds" 
            multiple 
            filterable 
            placeholder="选择接收人"
          >
            <el-option
              v-for="user in userList"
              :key="user.userId"
              :label="user.name"
              :value="user.userId"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="消息内容">
          <el-input
            v-model="form.content"
            type="textarea"
            :rows="4"
            placeholder="请输入消息内容"
          />
        </el-form-item>
        
        <el-form-item label="跳转链接">
          <el-input 
            v-model="form.jumpUrl" 
            placeholder="https://example.com/page" 
          />
        </el-form-item>
        
        <el-form-item>
          <el-button 
            type="primary" 
            :loading="loading" 
            @click="handleSend"
          >
            发送消息
          </el-button>
        </el-form-item>
      </el-form>
      
      <div v-if="result" class="result-panel">
        <el-alert :type="result.success ? 'success' : 'error'">
          {{ result.success ? '发送成功' : '发送失败' }}
          <div v-if="result.msgId">消息ID: {{ result.msgId }}</div>
          <div v-if="result.error">错误: {{ result.error }}</div>
        </el-alert>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue';
  import { useMessageStore } from '@/stores/MessageStore';
  import AccountSelector from '@/components/AccountSelector.vue';
  
  const store = useMessageStore();
  const loading = computed(() => store.loading);
  
  const form = ref({
    userIds: [],
    content: '',
    jumpUrl: ''
  });
  
  const result = ref(null);
  
  // 模拟用户列表
  const userList = ref([
    { userId: 'user001', name: '张三' },
    { userId: 'user002', name: '李四' },
    { userId: 'user003', name: '王五' }
  ]);
  
  async function handleSend() {
    if (!form.value.content) {
      ElMessage.error('请输入消息内容');
      return;
    }
    
    try {
      result.value = await store.sendMessage(
        form.value.content,
        form.value.userIds,
        form.value.jumpUrl
      );
      
      if (result.value.success) {
        form.value.content = '';
        form.value.jumpUrl = '';
      }
    } catch (error) {
      ElMessage.error('发送失败: ' + error.message);
    }
  }
  </script>